<template>
  <div>
    <el-row>
      <el-form :model="tableHead" label-width="60px">
        <!--        <el-col :span="1" class="ele-col-item"></el-col>-->
        <el-col
          :span="5"
        >
          <el-form-item label="规格名:">
            <el-input
              v-model="tableHead.name"
              :disabled="type===3||type===4?true:false"
              clearable
              @change="changeItemValue"
            />
          </el-form-item>

        </el-col>
        <el-col
          v-if="type===2||type===4"
          :span="5"
        ><el-form-item label="描述:">
          <el-input
            v-model="tableHead.description"
            :disabled="type===3||type===4?true:false"
            clearable
          />
        </el-form-item>
        </el-col>
        <!--        <el-col v-if="type===1" :span="1"></el-col>-->
        <el-col v-if="type===1" :span="4">
          <el-form-item label="类型">
            <el-select v-model="tableHead.goodsType" :disabled="type===3?true:false" placeholder="请选择类型">
              <el-option label="商品" value="goods" />
              <el-option label="服务" value="service" />
            </el-select>
          </el-form-item>

        </el-col>

        <!--        <el-col v-if="type===1" :span="1"></el-col>-->
        <el-col v-if="type===1" :span="4">
          <el-form-item label="是否必选">
            <el-switch
              v-model="tableHead.isRequired"
              :disabled="type===3?true:false"
              active-color="#13ce66"
              inactive-color="#eeeeee"
            />
          </el-form-item>

        </el-col>
        <el-col :span="3">
          <el-link v-show="type!==3&&type!==4" type="danger" @click="deleteItem">删除规格</el-link>
        </el-col>
      </el-form>
    </el-row>
    <el-row>
      <!--      <el-col :span="1" class="ele-col-item"></el-col>-->
      <el-col :span="19" type="flex">
        <el-form-item label="规格值:" label-width="60px">
          <el-col v-for="(item, i) in tableHead.values" :key="i" :span="4">
            <SpecValue ref="SpecValue" :table-col="item" :type="type" :index="index" @changeItemValue="changeItemValue" />
          </el-col>
        </el-form-item>
      </el-col>
      <el-col
        :span="5"
      >
        <el-col :span="12">
          <el-button v-show="type!==3&&type!==4" type="text" @click="addSpecValue">添加规格值</el-button>
        </el-col>
        <el-col :span="12">
          <el-link v-show="type!==3&&type!==4" type="danger" @click="deleteSpecValue">删除规格值</el-link>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import SpecValue from '../SpecValue/index'
export default {
  name: 'SpecItem',
  components: { SpecValue },
  props: {
    index: {
      type: Number,
      required: true
    },
    type: {
      type: Number,
      required: true
    }
  },
  data() {
    return {
      tableHead: {
        name: '',
        description: '',
        goodsType: '',
        isRequired: '',
        values: [{
          val: null
        }]
      }
    }
  },
  /* created() {
    const vm=this
    vm.tableHead.values.push({
      val: null
    },{
      val: null
    })
  },*/
  methods: {
    addSpecValue() {
      const vm = this
      vm.tableHead.values.push({
        val: null
      })
      vm.$emit('createTable')
    },
    getData() {
      const vm = this
      return vm.tableHead
    },
    changeItemValue() {
      const vm = this
      vm.$emit('createTable')
    },
    deleteItem() {
      const vm = this
      vm.$emit('delete', vm.index)
      vm.changeItemValue()
    },
    deleteSpecValue() {
      const vm = this
      const lastIndex = vm.tableHead.values - 1
      vm.tableHead.values.splice(lastIndex, 1)
      vm.$emit('createTable')
    }
  }
}
</script>

<style scoped>
</style>
